<template>
	<router-layout>
	<div class="pageBg">
		<div class="header">
			<div class="head_h">{{ startPrintName }}-{{ endPrintName }}</div>
			<div class="head_f">
				<van-button 
					icon="arrow-left" 
					class="date_prev" 
					:disabled="prevDisabled" 
					@click="minusDate"
				>
					前一天
				</van-button>
				<div class="date_picker" @click="datePicker">
					<div>
						<span>{{ date }}</span>
						<span>{{ week }}</span>
						<span><img src="@/assets/images/searchBus/date.png" /></span>
					</div>
				</div>
				<van-button 
					icon-position="right" 
					icon="arrow" 
					class="date_next" 
					:disabled="nextDisabled" 
					@click="addDate"
				>
					后一天
				</van-button>
			</div>
		</div>
		<div v-if="$store.state.dataLoading">
			<van-loading 
				color="#1989fa" 
				type="spinner" 
				class="dataLoading" 
				v-show="$store.state.dataLoading" 
			/>
		</div>
		<div v-else>
			<van-pull-refresh 
			 v-model="refreshing"
			 @refresh="onRefresh"
			 v-if="!noData"
			 class="body"
		  >
				<div class="buslist">
					<div class="busItem" :class="{noSeat : !Number(item.Seat)}" v-for="(item, index) in busData" :key="index" @click="fillOrder(item)">
						<div class="item_left">{{ item.busTime }}</div>
						<div class="item_right">
							<div>
								<div class="lineimg"><img src="@/assets/images/searchBus/line.png" /></div>
								<div class="linetxt">
									<h2>{{ item.busStart }}</h2>
									<h3>{{ item.StopName }} <span class="way" v-show="item.StopName !== item.EndStopName">(途经)</span></h3>
								</div>
							</div>
							<div class="cust_item">
								<h2>
									<span>¥</span>
									{{ item.Price }}
								</h2>
								<p>余票{{ item.Seat }}</p>
							</div>
						</div>
						<div class="linename">
							线路:
							<span>{{ item.lineName }}</span>
						</div>
					</div>
				</div>
			</van-pull-refresh>
			<div v-else class="nodata">
				<van-empty  description="暂无该车次信息" />
			</div>
			<div v-show="timeOut" class="timeout" @click="search">
				<van-empty image="network"  description="网络超时请点此处重试"/>
			</div>
			
		</div>
		<!-- 日期选择 -->
		<van-calendar
		  ref="dataPicker"
			v-model="dateShow"
			@confirm="onConfirm"
			color="#438BF7"
			:round="false"
			position="right"
			:min-date="minDate"
			:max-date="maxDate"
			:default-date="defaultDateChoose"
			:show-confirm="false"
		/>
	</div>
	</router-layout>
</template>
<script>	
import authMixin from '@/mixin/mixin'
export default {
	data() {
		return {
			loading:false,
			finished:false,
			refreshing: false,
			StopCode:'',    //到站站码
			StationCode:'',  //隶属站编号 即发车站站码
			ScheduleCode:'',  //班次号
			day: 0,
			nowDay: 0, //今天的日期
			prevDisabled: false,
			nextDisabled: false,
			startPrintName: '',
			endPrintName: '',
			EndStopName:'',
			dateShow: false,
			noData:false,
			timeOut:false,
			date: '',
			week: '',
			defaultDateChoose: '',
			dateScope: 4, //可买票天数范围
			minDate: new Date(), //日期选择最小值即今天的日期
			maxDate: '', //日期选择最大值
			busData: [],
			DepartDate:''  //发车日期
		};
	},
	mixins:[authMixin],
	created() {
		this.StationCode = this.$route.query.StationCode
		this.StopCode = this.$route.query.StopCode
		this.date = this.$route.query.date
		this.week = this.$route.query.week
		this.startPrintName = this.$route.query.startPrintName
		this.endPrintName = this.$route.query.endPrintName
		this.dateScope = Number(this.$route.query.dateScope)
		let now = new Date()
		this.nowDay = new Date().getDate()
		this.maxDate = new Date(now.setDate(now.getDate() + this.dateScope))
		this.pickerDefault()
		this.checkDate()
		this.$store.commit("setDataLoading", true)
		this.DepartDate = `${new Date().getFullYear()}-${this.date.split('月')[0]}-${this.date.split('月')[1].split('日')[0]}`
		this.defaultDateChoose = new Date(this.DepartDate)
		this.search()
		console.log(this.date)
	},
	methods: {
		datePicker() {
			this.dateShow = true
		},
		formatDate(date) {
			return `${date.getMonth() + 1}月${date.getDate()}日`
		},
		formatWeek(date) {
			switch (date.getDay()) {
				case 0:
					return `周日`;
					break;
				case 1:
					return `周一`;
					break;
				case 2:
					return `周二`;
					break;
				case 3:
					return `周三`;
					break;
				case 4:
					return `周四`;
					break;
				case 5:
					return `周五 `;
					break;
				case 6:
					return `周六`;
					break;
			}
		},
		onConfirm(option) {
			//日期选择回调
			this.date = this.formatDate(option)
			let day = this.date.split('月')[1].split('日')[0];
			this.day = Number(day);
			this.dateShow = false;
			this.checkDate()
			this.defaultDateChoose = option
			this.date = this.formatDate(this.defaultDateChoose)
			this.week = this.formatWeek(this.defaultDateChoose)
			setTimeout(()=>{
				this.search()
			},200)
		},
		checkPrevDate() {
			return this.day - this.nowDay;
		},
		checkNextDate() {
			return this.nowDay + this.dateScope - this.day;
		},
		checkDate(){
			//判断前一天后一天是否点击
			if (!this.checkPrevDate()) {
				this.prevDisabled = true;
			} else {
				this.prevDisabled = false;
			}
			if (!this.checkNextDate()) {
				this.nextDisabled = true;
			} else {
				this.nextDisabled = false;
			}
		},
		pickerDefault(){
			let day = this.date.split('月')[1].split('日')[0];
			this.day = Number(day);
			this.defaultDateChoose = new Date(new Date().setDate(this.day)); //设置默认选中日期
		},
		minusDate() {
			//前一天
			this.day--;
			this.checkDate()
			this.defaultDateChoose = new Date(new Date().setDate(this.day))
			this.date = this.formatDate(this.defaultDateChoose)
			this.week = this.formatWeek(this.defaultDateChoose)
			this.search()
		},
		addDate() {
			//后一天
			this.day++;
			this.checkDate()
			this.defaultDateChoose = new Date(new Date().setDate(this.day))
			this.date = this.formatDate(this.defaultDateChoose)
			this.week = this.formatWeek(this.defaultDateChoose)
			this.search()
		},
		onRefresh(){
			this.finished = false
			this.search()
		},
		search() {
			let DepartDate = `${new Date().getFullYear()}-${this.date.split('月')[0]}-${this.date.split('月')[1].split('日')[0]}`
			this.$store.commit("setDataLoading", true)
			this.timeOut = false
			//搜索回调
			this.$request({
				method:'post',
				url:'index/queryshift',
				data:{
					StationCode:this.StationCode,  //发车站站码
					StopCode: this.StopCode,    //到站站码
					DepartDate: DepartDate,   //发车日期
					ScheduleCode:'-1'  //班次号默认-1
				}
			}).then(res=>{
				console.log(res)
				this.$store.commit("setDataLoading", false)  //关闭加载数据图标
				if(!res.data || !res.data.length){
					this.noData = true
				}else{
					this.noData = false
					let data = []
					res.data.forEach(item=>{
						let dataObj = `{
										"busTime": "${item.DepartTime}",
										"ArriveTime": "${item.ArriveTime}",
										"busStart": "${this.startPrintName}",
										"StopName": "${item.StopName}",
										"EndStopName": "${item.EndStopName}",
										"lineName": "${item.RouteName}",
										"Price": "${item.FullTicketPrice}",
										"HalfPrice": "${item.HalfTicketPrice}",
										"Seat": "${ item.LeastSeatCount > 0 ? item.LeastSeatCount : 0}",
										"ScheduleCode": "${item.ScheduleCode}"
								}`
						data.push(JSON.parse(dataObj))
					})
					this.busData = data
					///////////////////
				}
			}).catch(err=>{
					this.$store.commit("setDataLoading", false)
					if(err.message.includes('timeout') && !res.data.length){
						this.timeOut = true
					}
					console.log(err)
				})
		},
		fillOrder(item){
			//跳转到车票详情购买
			if (Number(item.Seat)){
				this.$router.push({
					path:"/order",
					query:{
						StartPrintName: item.busStart,
						StationCode: this.StationCode,
						StopName: item.StopName,
						StopCode: this.StopCode,
						EndStopName: item.EndStopName,
						DepartTime: item.busTime,
						ScheduleCode: item.ScheduleCode,
						ArriveTime: item.ArriveTime,
						date: this.date,
						Week: this.week,
						Price: item.Price,
						HalfPrice: item.HalfPrice
					}
				})
			}
			/////////
		}
	}
};
</script>
<style scoped>
.header {
	position: fixed;
	top:0;
	right:0;
	left:0;
	z-index: 5;
	height: auto;
	background: #567cf3;
	padding: 0 0.3rem 0.25rem 0.3rem;
}
.date_picker {
	height: 0.7rem;
	border-radius: 0.15rem;
	background: #fff;
}
.date_picker > div {
	height: 0.7rem;
	border-radius: 0.1rem;
	display: flex;
	align-items: center;
}
.head_h {
	padding: 0.5rem 0 0rem 0;
	text-align: center;
	color: #fff;
	font-size: 0.44rem;
}
.head_f {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.head_f img {
	width: 0.4rem;
	margin-right: 0.15rem;
	margin-left: 0.05rem;
	vertical-align: bottom;
}
.date_picker span:nth-of-type(2) {
	margin: 0 0.2rem 0 0;
}
.date_picker span {
	margin: 0 0.1rem;
	font-size: 0.35rem;
}
.date_picker span:nth-of-type(1) {
	margin-left: 0.15rem;
}
.date_prev,
.date_next {
	color: #fff;
	font-size: 0.37rem;
	display: flex;
	align-items: center;
	background: transparent;
	border: none;
	padding-left: 0;
	padding-right: 0;
}
.date_prev .van-icon {
	margin-right: 0.1rem;
	font-size: 0.44rem;
}
.date_next .van-icon {
	margin-left: 0.1rem;
	font-size: 0.44rem;
}
.buslist {
	padding: 0 0.3rem 0.3rem 0.3rem;
}

.busItem {
	background: #fff;
	border-radius: 0.2rem;
	padding: 0.3rem;
	margin-top: 0.25rem;
	height: auto;
	overflow: hidden;
}
.item_left {
	line-height: 1.4rem;
	float: left;
	width: 1.8rem;
	text-align: center;
	font-size: 0.5rem;
}
.item_right {
	margin-left: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lineimg img {
	height: 1rem;
	margin-top: 0.14rem;
}
.lineimg {
	float: left;
}
.linetxt {
	margin-left: 0.4rem;
}
.linetxt h2 {
	font-weight: normal;
	font-size: 0.39rem;
	margin-bottom: 0.3rem;
}
.linetxt h3 {
	font-weight: normal;
	font-size: 0.39rem;
}
.cust_item {
	text-align: right;
}
.cust_item h2 {
	font-weight: normal;
	font-size: 0.55rem;
	color: #ff8400;
	margin-bottom: 0.05rem;
}
.cust_item p {
	color: #999;
	font-size: 0.33rem;
}
.linename {
	position: relative;
	padding-left: 0.45rem;
	margin-top: 0.08rem;
	margin-left: 2rem;
	color: #999;
	font-size: 0.31rem;
}
.linename span {
	margin-left: 0.01rem;
}
.linename::before {
	content: '';
	display: block;
	width: 0.35rem;
	height: 0.35rem;
	background: url(~@/assets/images/searchBus/bus.png);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.cust_item h2 span {
	font-size: 0.43rem;
	margin-right: 0.05rem;
}
.date_prev.disabled {
	color: rgba(255, 255, 255, 0.5);
}
.date_prev.disabled .van-icon {
	color: rgba(255, 255, 255, 0.5) !important;
}
.date_next.disabled {
	color: rgba(255, 255, 255, 0.5);
}
.date_next.disabled .van-icon {
	color: rgba(255, 255, 255, 0.5) !important;
}
.nodata{
	padding-top: 4.5rem;
}
.body {
	padding-top: 2.6rem;
	min-height: calc(100vh - 2.6rem);
}
.nodata{
	position: absolute;
	top:0;
	left:0;
	right:0;
}
.timeout{
	position: absolute;
	top:25%;
	left:0;
	right:0;
}
.noSeat .cust_item h2{
	color:#ccc
}
.way{
	color:#4088EE;
	font-size: .37rem;
}
</style>
